<template>

  <div class="system-home">
    <div class="head-footer-show">
      <pageHeader></pageHeader>
    </div>
    <div class="headImage">
      <h1 class="w1200 title">社会组织监管一件事</h1>
    </div>
    <el-row class="w1200">
      <el-col :span="12">
        <el-popover
          placement="left"
          :width="420"
          trigger="hover"
        >
          <template #reference>
            <img src="https://www.yyqygc.com:9000/file/asset/ykbwxcode.jpg" style="width: 30px;height: 30px;margin-top: 20px;"></img>
          </template>
          <el-row>
            <el-col :span="24" style="text-align: center;">
              <span style="font-size: 18px;">系统问题请加微信群，工作人员在线指导。</span>
            </el-col>
            <el-col :span="24" style="text-align: center;margin-top: 20px;margin-bottom: 20px;">
              <img src="https://www.yyqygc.com:9000/file/asset/ykbwxcode.jpg" style="width: 300px;height: 300px;"></img>
            </el-col>
          </el-row>
        </el-popover>
      </el-col>
      <el-col :span="12">
        <div class="menu-btn" style="margin-top: 15px;float: right;" @click="showUploadFile2()">抽查检查</div>
        <div class="menu-btn" style="margin-top: 15px;float: right;" @click="showUploadFile1()">风险处置</div>
        <div class="menu-btn" style="margin-top: 15px;float: right;" @click="dialogStore = true;">综合评分</div>
      </el-col>
    </el-row>
    <div class="w1200">

    </div>
    <div class="w1200">
      <div class="home_menu_main">
        <div class="home-menu-item1">
          <div class="menu-title">年检年报</div>
          <div class="menu-btn" @click="itemClick(0)">点击查看</div>
        </div>
        <div class="home-menu-item2" @click="itemClick(1)">
          <div class="menu-title">活动表彰、宣传报道</div>
          <div class="menu-btn">点击查看</div>
        </div>
      </div>
      <div class="list-head">
        <div class="headTitle1">通知公告</div>
        <div class="headTitle2" style="cursor: pointer;" @click="toDetail">查看更多 >></div>
      </div>
    </div>
    <!--        <img src="@/assets/images/1.png" class="system-home-title" />-->
    <!--        <div class="system-home__menu">-->
    <!--          <div class="menu__item" v-for="item in ykbHomeNavMenu" :key="item.id" :style="{-->
    <!--            backgroundColor: item.color,-->
    <!--            width: `calc(${width} / ${Math.min(4, ykbHomeNavMenu.length)})`,-->
    <!--            height: `calc(${width} / ${Math.min(4, ykbHomeNavMenu.length)})`-->
    <!--          }" @click="navMenuGoPath(item)">-->
    <!--            <img :src="setSrc(item.icon)" alt="" />-->
    <!--            {{ item.title }}-->
    <!--          </div>-->
    <!--        </div>-->

    <div class="notify" v-if="info">
      <!--      <img src="@/assets/images/2.png" alt="" class="notify-1" />-->
      <el-carousel class="carousel" direction="vertical" pause-on-hover loop :autoplay="true">
        <el-carousel-item v-for="item in info" :key="item">
          <div class="notify-tx" @click="MRichPopupOpen(it.businessKey, it.title)" v-for="it in item">
            <div style="width: 70%;"><span style="color: #619EFE;">•</span>&ensp;{{ it.title || '' }}</div>
            <div style="width: 30%;text-align: right;font-size: 16px;color: #888888;">{{ it.createTime || '' }}</div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!--      <div class="notify-btn" @click="toDetail">查看更多</div>-->
    </div>
    <div class="head-footer-show">
      <pageFooter></pageFooter>
    </div>
    <el-dialog v-model="state.dialogVisible" title="整改材料上传" width="40%">
      <el-upload v-model="state.imageFiles" name="file" :action="state.uploadUrl" :on-success="handleImageSuccess"
        :limit="20" :before-upload="handleImageBeforeUpload" multiple
        accept=".png,.jpg,.jpeg,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt" :on-exceed="handleImageExceed"
        :headers="state.headers" :before-remove="handleImageBeforeRemove" :file-list="state.imageFileList">
        <el-button type="primary">点击上传</el-button>
      </el-upload>
      <template #footer>
        <el-button type="primary" @click="postFile()">确定</el-button>
        <el-button @click="state.dialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
    <MRichPopup ref="MRichPopupRef" />
    <el-dialog title="得分依据" v-model="dialogStore" width="1000px" top="4vh" append-to-body>
      <div class="pop-box">
        <p class="finally-point">{{ orgName }}</p>
        <p class="finally-point">综合评分：{{ orgScore }}</p>
        <el-table show-summary  border :data="scoreRecords"  align="center">
          <el-table-column align="center" type="index" label="序号" width="80" />
          <el-table-column align="center" prop="name" label="评价类型" />
          <el-table-column align="center" prop="maxScore" label="评价分值" />
          <el-table-column align="center" prop="ruleName" label="评价结果"  />
          <el-table-column align="center" prop="score" label="评价得分">
            <template #default="scope">
              <span :style="{ color: scope.row.score > 0 ? 'red' : 'green' }">{{ scope.row.score }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import { useRouter, useRoute } from 'vue-router'
import { ykbHomeNavMenu } from '@/config/navigationMenu'
import { useUserStore } from '@/store'
import { computed, onMounted, ref, onUnmounted, reactive } from 'vue'
import { noticePage } from '@/api/spotCheck/spotCheck'
import { userYKBLogin } from '@/api/user/login'
import db from '@/storage'
import pageHeader from '@/views/yearCheck/ykb/other/pageheader.vue'
import pageFooter from '@/views/yearCheck/ykb/other/pagefooter.vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { wrapperLoadViteEnv } from '~/build/utils'
import { ElMessage } from 'element-plus'
import MRichPopup from '@/views/notify/popup/popup.vue'
import { getPortraitList } from '@/api/evaluate'

const screenWidth = ref(0)
const useStore = useUserStore()
const scoreRecords = ref([])
const dialogStore = ref(false)
const orgScore = ref(0)
const route = useRoute()
const router = useRouter()
const orgName = ref('');
const getStore = () =>{
  const user = useUserStore()
  const userInfo = user.userInfo
  orgName.value = userInfo.userName
  getPortraitList({ orgName: userInfo.userName, pageNum: "1", pageSize: "10" }).then(res => {
    if(res.data.rows[0].scoreRecords){
      scoreRecords.value = JSON.parse(res.data.rows[0].scoreRecords)
    }

    orgScore.value = res.data.rows[0].score
  })
}
getStore();
const postFile = () => {
  state.dialogVisible = false
  ElMessage.success('上传成功！')
}
const handleImageSuccess = (response, file, imageFileList) => {
  state.imageFileList = imageFileList   // 更新已上传的图片列表
  if (state.imageFiles == null) {
    state.imageFiles = []
  }
  state.imageFiles.push(response.data)
  console.log(state.imageFiles)
}
const handleImageBeforeRemove = (file, imageFileList) => {
  const index = state.imageFileList.indexOf(file) // 获取当前被移除的图片索引
  if (index !== -1) {
    state.imageFileList.splice(index, 1) // 从数据源中移除该图片
    state.imageFiles.splice(index, 1)
  }
}
const handleImageExceed = (imageFiles, imageFileList) => {
  ElMessage.warning('只能上传1张图片！')
}
const handleImageBeforeUpload = (file) => {
  if (file.size < 20) {
    ElMessage.error('不能上传空文件！')
    return false // 返回false停止上传
  }
  return true
}

defineOptions({
  name: 'SystemHomeMenu'
})
const MRichPopupRef = ref()
const MRichPopupOpen = (id, title) => {
  MRichPopupRef.value.show(id, title)
}


const width = '64vw'
let isPhone = false

const info = ref('')
const viteEnv = wrapperLoadViteEnv(import.meta.env)

const state = reactive({
  dialogVisible: false,
  imageFiles: [],
  imageFileList: [],
  uploadUrl: viteEnv.VITE_BASE_URL_API + 'hbsys-system/minio/upload',
  headers: { Authorization: 'Bearer ' + db.get('token') }
})
onMounted(() => {
  // console.log(333333)
  // const currentPath = route.query
  // userYKBLogin('pGydQq6gh7szVsdRZ6LcwjfqIiUENTYcGEmrJseF').then((res) => {
  //   const { user, access_token } = res.data
  //   localStorage.setItem('creditCode', user.workNo)
  //   db.set('token', access_token)
  //   console.log(res)
  // })
  noticePage({ pageNum: 1, pageSize: 9 }).then((res) => {
    // 将数据分割成每组三条
    info.value = chunkArray(res.data.list, 3)
  })

  initScreen();
  // disableBackButton();

  history.pushState(null, null, document.URL);

  window.addEventListener(
    'popstate',
    function (e) {
      history.pushState(null, null, document.URL);
    }, false);
})
// onUnmounted(() => {
//   console.log(location.href)
//   debugger
//   window.removeEventListener('popstate', stopBack);
// });
function initScreen() {
  const winWidth = window.innerWidth;
  const size = winWidth / 1920
  if (winWidth > 768 && winWidth < 1850) {
    document.body.style.zoom = size; //放大缩小相应倍数
  }
}
// 将一维数组分割成二维数组
function chunkArray(array, size) {
  const result = []
  for (let i = 0; i < array.length; i += size) {
    result.push(array.slice(i, i + size))
  }
  return result
}

const toPage = (it) => {
  switch (it.source.value) {
    case 1:
      router.push({
        path: '/spotCheck/informationDisclosure',
        query: {
          id: it.businessKey
        }
      })
  }
}

// 引入图标
const setSrc = (name?: string) => {
  return new URL(`../../../assets/imgs/home/${name}.png`, import.meta.url).href
}

const getNavigationMenuMap = computed(() => {
  return useStore.navigationMenuMap
})
//跳转
const navMenuGoPath = (item) => {
  console.log(item)
  // let menu = useStore.navigationMenuMap.get(item.path)
  router.push({
    path: isPhone ? item.pathPhone : item.path
  })
}

const itemClick = (index) => {
  console.log(menuList.value[index])
  navMenuGoPath(menuList.value[index])
}

const showUploadFile1 = () => {
  window.open('https://mzj.zgdxyyfgs.com:8000/system/#/riskDisposal/taskManagement')
  // state.dialogVisible = true
}

const showUploadFile2 = () => {
  window.open('https://mzj.zgdxyyfgs.com:8000/system/#/spotCheck/spotCheck/qualifiedSpotChecks')
}

const menuList = ref([
  {
    path: '/ykb/index',
    title: '年检年报',
    icon: '1'
  },
  {
    path: 'ykb/activity',
    pathPhone: 'phone/activity/list',
    title: '活动管理',
    icon: '2'
  }
]);
const toDetail = () => {
  router.push({
    name: 'Notify'
  })
  // window.open('https://mzj.zgdxyyfgs.com:8000/system/#/spotCheck/notify')
}
const updateScreenWidth = () => {
  //手机\
  isPhone = window.innerWidth < 500 ? true : false

}

const disableBackButton = () => {
  history.pushState(null, document.title, location.href);
  window.addEventListener('popstate', stopBack);
};

const stopBack = () => {
  console.log(location.href)
  debugger
  history.pushState(null, document.title, location.href);
};
updateScreenWidth()
</script>


<style lang="scss" scoped>
.head-footer-show {
  display: block;
}

.menu-title {
  font-size: 30px;
  font-weight: bold;
  color: #0856B2;
  margin-top: 50px;
  margin-left: 32px;
  cursor: pointer;
}

.menu-btn {
  color: #0856B2;
  margin-left: 32px;
  border: 1px solid #0856B2;
  width: 110px;
  height: 34px;
  border-radius: 17px;
  text-align: center;
  line-height: 34px;
  margin-top: 32px;
  cursor: pointer;
}

.list-head {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}

.headTitle1 {
  width: 50%;
  font-size: 32px;
  font-weight: bold;
  color: #333333;
}

.headTitle2 {
  width: 50%;
  font-size: 16px;
  line-height: 32px;
  text-align: right;
  color: #666666;
}

.home_menu_main {
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6);
  padding: 20px;
  background: white;
  display: flex;
  flex-direction: row;
  margin-top: 15px;
  margin-bottom: 50px;
}

.home-menu-item1 {
  width: 48%;
  height: 240px;
  background: url('@/assets/imgs/home/ykb_home1.png');
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.home-menu-item2 {
  width: 48%;
  height: 240px;
  background: url('@/assets/imgs/home/ykb_home2.png');
  margin-left: 3%;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.system-home {
  //height: 100%;
  margin-left: 0%;
  display: flex;
  flex-direction: column;

  .headImage {
    background-image: url('@/assets/imgs/headimage.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
  }
}

.notify {
  height: 138px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 1200px;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6);
  padding: 20px;
  background: white;

  .carousel {
    flex: 1;
    min-width: 0;
    padding: 0 10px;
    margin: 0 20px;
    height: 100%;
  }

  .notify-tx {
    cursor: pointer;
    width: 100%;
    height: 26px;
    font-family: 思源黑体 CN, 思源黑体 CN;
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    line-height: 0px;
    text-align: left;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 26px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
  }

  .notify-btn {
    //width: 56px;
    font-family: 思源黑体 CN, 思源黑体 CN;
    font-weight: 400;
    font-size: 18px;
    color: #1C85FF;
    line-height: 0px;
    text-align: right;
    font-style: normal;
    cursor: pointer;
  }
}

:deep(.el-carousel__indicators) {
  display: none !important;
}

.menu__item {
  position: relative;
}

.w1200 {
  width: 1200px;
  margin: 0 auto;
}

.title {
  padding-top: 75px;
}

/* 当屏幕宽度小于或等于768像素时，应用以下样式 */
@media (max-width: 490px) {
  .title {
    text-align: center;
  }

  .headTitle1 {
    width: 100%;
    padding-left: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }

  .notify {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 1200px;
    border-radius: 8px;
    box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6);
    background: white;

    .carousel {
      flex: 1;
      min-width: 0;
      padding: 0 10px;
      height: 100%;
    }

    .notify-tx {
      cursor: pointer;
      width: 100%;
      height: 26px;
      font-family: 思源黑体 CN, 思源黑体 CN;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      text-align: left;
      font-style: normal;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 26px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
    }
  }

  .w1200 {
    width: 100%;
    margin: 0 auto;
  }

  .head-footer-show {
    display: none;
  }

  .menu-title {
    font-size: 18px;
    font-weight: bold;
    color: #0856B2;
    margin-top: 30px;
    margin-left: 12px;
    cursor: pointer;
  }

  .home_menu_main {
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6);
    padding: 20px;
    background: white;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
  }

  .home-menu-item1 {
    width: 45%;
    height: 240px;
    background: url('@/assets/imgs/home/ykb_home1.png');
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
  }

  .home-menu-item2 {
    width: 45%;
    height: 240px;
    background: url('@/assets/imgs/home/ykb_home2.png');
    margin-left: 3%;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
  }

  .menu-btn {
    color: #0856B2;
    margin-left: 2px;
    border: 1px solid #0856B2;
    width: 100px;
    height: 30px;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    margin-top: 18px;
    cursor: pointer;
  }

  .system-home-title {
    width: 90% !important;
    height: auto !important;
    margin-bottom: 50px !important;
  }

  .menu__item {
    width: 150px !important;
    height: 150px !important;

    img {
      width: 15vw !important;
      height: 15vw !important;
      margin-bottom: 20px !important;
    }
  }
}

.finally-point {
  font-size: 26px;
  text-align: center;
}
</style>
